<template>
	<view class="comment-wrap">
		<u-navbar
			backIconColor="#FFFFFF"
			:background="{background: 'linear-gradient(90deg,#615CED,#8286F2)'}"
			:border-bottom="false"
			title="我的评语"
			titleColor="#FFFFFF"
			height="88">
		</u-navbar>

		<view class="comments-list" v-if="lists.length > 0">
			<view class="commentitem" v-for="(item,index) in lists" :key="index">
				<view class="title">
					<image src="../../static/ic_comment.png" mode="scaleToFill"></image>
					<view class="line-clamp-1 fenlei">{{item.category}}</view>
				</view>
				<view class="pingyu" v-for="(it,idx) in item.content" :key="idx">
					<view class="fangkuai"></view>
					<view class="line-clamp-1 neirong">{{it.content}}</view>
				</view>
				<view class="caozuo">
					<view class="shanchu" @click="deleteComm(true,item,index)">
						删除评语
					</view>
					<view class="xiugai" @click="editerComm(item,index)">
						修改评语
					</view>
				</view>
			</view>
		</view>

		<view class="empty-content" v-else>
			<image src="../../static/ic_empty.png" mode="aspectFill"></image>
			<view class="empty-txt">暂无评语记录~</view>
		</view>

		<view class="addbtn" @click="builder">新建评语</view>

		<!-- 删除弹窗 -->
		<u-popup v-model="isDelete" mode="center" borderRadius="20" :zoom="false">
			<view class="shanchutc">
				<view class="tctop">
					<image src="../../static/ic_tips.png" mode=""></image>
					<view class="tishi">提示</view>
				</view>
				<view class="tsneirong">确定删除评语吗？</view>
				<view class="hengxian"></view>
				<view class="button">
					<view class="kaolv" @click="deleteComm(false)">考虑一下</view>
					<view class="shuxian"></view>
					<view class="queding" @click="confirmDelete">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lists: [],
			isDelete: false,
			operItem: {}
		}
	},
	onShow() {
		this.getLists();
	},
	methods: {
		builder() {
			uni.navigateTo({
				url: 'builder'
			});
		},
		deleteComm(show, item, index) {
			this.isDelete = show;
			this.operItem = item;
		},
		// 删除评语
		confirmDelete() {
			let that = this;
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.delComment}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.operItem.id
				},
				header: {
					'authtoken': that.$auth.token(that.$api.delComment)
				},
				success(res) {
					if (res.data?.code == 1) {
						that.deleteComm(false);
						that.getLists();
						uni.showToast({
							title: res.data?.msg || '删除成功',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.data?.msg || '删除失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			})
		},
		editerComm(item, index) {
			uni.navigateTo({
				url: `editer?id=${item.id}`
			});
		},
		// 获取评语列表
		getLists() {
			let that = this;
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.comment}`,
				method: 'POST',
				timeout: 30000,
				header: {
					'authtoken': that.$auth.token(that.$api.comment)
				},
				success(res) {
					if (res.data?.code == 1) {
						that.lists = res.data?.data;
					} else {
						uni.showToast({
							title: res.data?.msg || '获取数据失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				},
			})
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F8F8F8;
}
.comment-wrap{
	.comments-list{
		padding-bottom: 170rpx;
		.commentitem{
			width: 100%;
			background-color: #FFFFFF;
			padding: 30rpx;
			margin-bottom: 20rpx;
			.title{
				display: flex;
				flex-direction: row;
				align-items: center;
				image{
					width: 27rpx;
					height: 27rpx;
				}
				.fenlei{
					font-size: 28rpx;
					color: #333333;
					line-height: 25rpx;
					margin-left: 10rpx;
				}
			}
			.pingyu{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 24rpx;
				.fangkuai{
					width: 6rpx;
					height: 6rpx;
					background: #615CED;
					margin-left: 10rpx;
				}
				.neirong{
					font-size: 24rpx;
					color: #333333;
					line-height: 24rpx;
					padding-left: 10rpx;
					flex: 1;
				}
			}
			.caozuo{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				margin-top: 30rpx;
				.shanchu{
					width: 170rpx;
					height: 60rpx;
					border: 2rpx solid #CCCCCC;
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #666666;
					line-height: 60rpx;
					text-align: center;
				}
				.xiugai{
					width: 170rpx;
					height: 60rpx;
					border: 2rpx solid #CCCCCC;
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #615CED;
					line-height: 60rpx;
					text-align: center;
					margin-left: 20rpx;
				}
			}
		}
	}
	.empty-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 234rpx;
		image{
			width: 276rpx;
			height: 265rpx;
		}
		.empty-txt{
			height: 27rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 48rpx;
			margin-top: 33rpx;
		}
	}
	.addbtn{
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(0deg, #615CED, #8286F2);
		box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(119, 163, 255, 0.28);
		border-radius: 45rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		bottom: 50rpx;
		left: 75rpx;
	}
	.shanchutc{
		width: 600rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.tctop{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 22rpx 0 0 25rpx;
			image{
				width: 33rpx;
				height: 33rpx;
			}
			.tishi{
				font-size: 26rpx;
				color: #E93B3D;
				line-height: 26rpx;
				font-weight: bold;
				padding-left: 19rpx;
			}
		}
		.tsneirong{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
			padding-top: 69rpx;
		}
		.hengxian{
			width: 100%;
			height: 2rpx;
			background-color: #D5D5D5;
			margin-top: 60rpx;
		}
		.button{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 106rpx;
			.kaolv{
				height: 100%;
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: #8D8D8D;
				line-height: 106rpx;
			}
			.shuxian{
				width: 2rpx;
				height: 106rpx;
				background-color: #D5D5D5;
			}
			.queding{
				height: 100%;
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: #333333;
				line-height: 106rpx;
			}
		}
	}
}
</style>
